import React, { Component } from 'react';
import PropTypes from 'prop-types';

import Swiper from 'react-native-swiper'
import {CachedImage} from "react-native-img-cache";

import styles from './css/index';

import {
    View
} from 'react-native';

export default class Banner extends Component {
    static propTypes = {
        list:PropTypes.array.isRequired, // 对话框标题
    };
    render() {
        return (this.props.list.length > 0 ?
                <View style={styles.swiperWrapper}>
                    <Swiper
                        showsButtons={false}
                        removeClippedSubviews={false} //这个很主要啊，解决白屏问题
                        autoplay={true}
                        horizontal ={true}
                        autoplayTimeout={4}
                        paginationStyle={styles.swipepaginationStyle}
                        dotStyle={styles.swipedotStyle}
                        activeDotStyle={styles.swipeactiveDotStyle}
                    >
                {this.props.list.map((item,i) => {
                    return (
                        <CachedImage key={i} style={styles.bannerImg} resizeMode="stretch" source={{uri: item.imgUrl}} />
                    )
                })}   
                    </Swiper>
                </View>
            : null
        )
    }
}